<template>
    <div class="logistics">
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
            <el-tab-pane label="待付款"  name="0">
                <Yetpay :tableData="tableData"></Yetpay>
            </el-tab-pane>
            <el-tab-pane label="待发货"  name="1">
                <Yet :tableData="tableData"></Yet>
            </el-tab-pane>
            <el-tab-pane label="待评价"  name="3">
                <Already :tableData="tableData"></Already>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
    import Already from "../../component/already"
    import Yet from "../../component/yet"
    import Yetpay from "../../component/yetpay"
export default {
    components:{
        Already,
        Yet,
        Yetpay
    },
    data(){
        return{
            activeName:0,
            tableData:[]
        }
    },
    methods:{
        handleClick() {
            this.$api.$post("/GetOrder",{orderStatus:this.activeName}).then((res)=>{
                console.log(res)
                this.tableData = res.data
            })
        }
    }
}
</script>
<style lang="scss" scoped>
    .logistics{
        width: 100%;
        el-tab-pane{
            height: 20px;
        }
    }
</style>